import React, { useEffect } from 'react'
import { Input, Dialog, Form, Space, Button, Image  } from 'react-vant';
import { httpPost } from '@/axios';
import kucun_title from "@/assets/images/kucun_title.png"
import style from "./index.module.less"

const EditView = ({ onOK, data = {} }) => {
  const [form] = Form.useForm()

  const onFinishLogin = async (value) => {
    const list = Object.keys(value)
    let obj = {}
    for (let i = 0; i < list.length; i++) {
      obj[list[i]] =  value[list[i]] ? value[list[i]].replace(/\s/g, '') : value[list[i]]
    }
    const res = await httpPost('/profit/update', { ...obj, id: data.id });
    if (res) {
      onOK(true)
    }
  }
  useEffect(() => {
    const { outStoreTime_Str_ss } = data;
    form.setFieldsValue({
      ...data,
      outStoreTime: outStoreTime_Str_ss,
    })
  }, [data, form])
  return (
    <Dialog
      visible={true}
      footer={(
        <div style={{ width: "100%", backgroundColor: "transparent", display: "flex", alignItems: 'center', justifyContent: "center", padding: "20px 0px", borderTop: "1px solid #979797" }}>
          <div>
            <Button onClick={() => onOK()} round style={{ width: 120, boxShadow: "0px 0px 9px 0px rgba(0,0,0,0.21)", fontSize: 18, color: "#808080", marginRight: 10 }}>取消</Button>
            <Button onClick={() => form.submit()} round style={{ width: 120, background: "linear-gradient( 90deg, #59B8EF 0%, #1677FF 100%)", boxShadow: '0px 0px 9px 0px rgba(0,0,0,0.5)', fontSize: 18, color: "#fff", border: "none" }}>确认</Button>
          </div>
        </div>
      )}
    >
      <div>
        <div className={style.bianjidata}>
          <Image width={30} height={30} src={kucun_title} />
          <div>编辑</div>
        </div>
        <Form form={form} onFinish={onFinishLogin}>
          <Form.Item name='stockNo' label='编号'>
            <Input disabled placeholder='请输入编号' />
          </Form.Item>
          {/* <Form.Item
            rules={[
              { required: true, message: '请填写类型1' },
              { pattern: /^[A-Z][1-9]$/, message: '输入不合规' },
            ]} 
            name='type1' label='类型1'>
            <Input disabled placeholder='请输入类型1' />
          </Form.Item> */}
          <Form.Item name='pos' label='POS'>
            <Input disabled placeholder='请输入POS' />
          </Form.Item>
          <Form.Item name='percent' label='%'>
            <Input disabled placeholder='请输入%' />
          </Form.Item>
          {/* <Form.Item rules={[{ required: true, message: '请填写备注' }]} name='remark' label='备注'>
            <Input disabled placeholder='请输入备注' />
          </Form.Item> */}
          <Form.Item rules={[{ required: true, message: '请填写利润' },{ pattern: /^[0-9]+(\.[0-9]+)?$/, message: '请输入数值' }]} name='profit' label='利润'>
            <Input placeholder='请输入利润' />
          </Form.Item>
          <Form.Item rules={[{ required: true, message: '请填写SHOP' }]} name='shop' label='SHOP'>
            <Input placeholder='请输入SHOP' />
          </Form.Item>
          <Form.Item rules={[{ required: true, message: '请填写销售员' }, { pattern: /^[\u4e00-\u9fa5\d]+$/, message: '请输入文本或数字' }]} name='salesman' label='销售员'>
            <Input placeholder='请输入销售员' />
          </Form.Item>
          <Form.Item rules={[{ required: true, message: '请填写销售员2' }]} name='salesman2' label='销售员2'>
            <Input placeholder='请输入销售员2' />
          </Form.Item>
          {/* <Form.Item rules={[{ required: true, message: '请填写出库时间' }]} name='outStoreTime' label='出库时间'>
            <Input disabled />
          </Form.Item> */}
        </Form>
      </div>
    </Dialog>
  )
}

export default EditView;
